How to Set Up LIFF Application Development Environment for a Team
The CX Division LINE Team is mainly responsible for the development of LIFF applications that run on LIFF browser and LINE mini-app. We use React and other common web technologies for front-end development, but when we consider using third-party libraries or checking the UI elements, we often need to confirm that the application will work properly in LIFF browser and on various OS and devices.
This article summarizes the procedure for creating an environment where you can distribute the LIFF URL to your development team members and have them check the application on their own devices.
Steps We Will Follow
I follow the steps below when I need to try out a LIFF application under development from actual devices and make application testable by other team members.
- Create a sample application.
- Deploy and host your web app in Cloud environment.
- Login to the LINE Developers Console and create a provider.
- Create a LINE Login channel under the provider.
- Create a LIFF Application under LINE Login.
- Invite team members to join the LIFF channel.
- Access the LIFF URL from your mobile device to see how it works.
Step 1. Create a Sample Application
As an example, we use sample application I've previously created.
In this sample application, I've used third party library called react-beautiful-dnd. The goal of this article is to make this application testable by the team members' mobile devices to confirm this third-party library works nicely in different devices.
If you just want to check the flow, you can create a sample app with create-react-app command, and deploy it as a LIFF app to view it on a mobile device as a goal.
npx create-react-app sample_app --typescript
Step 2. Deploy and Host Sample Application with Amplify Console
In order to specify the page URL on the LINE Developers Console, we need to deploy our web application on the Internet somewhere. In this example, we will use Amplify Console to deploy and host the React app that we just created.
First, let's push the React sample project to a Github repository.
After committing the code to Github, we will configure the Amplify Console CI pipeline by going to AWS Management Console > AWS Amplify and selecting New app > Host web app.
On the next screen, select Github and branch, leave the other settings as they are, and click Save and Deploy.
After a while, you will be able to see from the Amplify Console dashboard that the deployment is complete, and you can check the screen from the URL on the bottom left. We will specify this URL as the LIFF Callback URL in the LINE Developer Console later.
Step 3. Log into LINE Developers Console and Create a Provider
Login to the LINE Developers Console and create a provider using the Create button next to Providers.
Step 4. Add LINE Login Channel under the Provider
After creating a provider, you can create a LINE Login channel under the provider. Create a LINE Login with the following settings.
| Setting | Value |
|---|---|
| Channel type | LINE Login |
| Channel name | Channel name |
| Channel description | Channel description |
| App types | Web App |
Step 5. Create a LIFF Application under LINE Login
Open the LIFF tab of the LINE Login and click the Add button to add a LIFF application.
Add the LIFF application with the following settings.
| Setting | Value | What is it |
|---|---|---|
| LIFF app name | SampleReactApp | LIFF Application Name |
| Size | Full | Screen height and width area when the application is opened in LIFF Browser. |
| Endpoint URL | The URL that was dispatched when you deployed your web app in the Amplify Console. | |
| Scopes | Profile | |
| Bot Link feature | Off | |
| Scan QR | OFF | liff.scanCode()feature enabled/disabled |
| Module Mode | OFF |
Reference：Adding a LIFF app to a channel
Step 6. Invite Team Members to join the LIFF Channel
In order to access the LIFF app from a private LINE Channel, you need to register an email address associated with the LINE account of the team member in the Roles field.
There are three types of roles: Admin, Tester, and Member, with Admin > Tester > Member being less privileged.
A confirmation email will be sent to added member's registered email address. The Role will be added when email is verified.
Step 7. Access the LIFF URL from Mobile Devices
If the sample application is viewable from your team member's device, you have completed the creation of the LIFF Application development environment for a team.
You can check the LIFF URL from the LIFF tab of the LINE Developers Console.
When the authentication screen appears, click "Allow".
The application is now testable from member's devices.
I found that the react-beautiful-dnd used in the sample app also works nicely in the LIFF browser.
Original Post in Japanese :
